/**
 * Created by ljy on 2016/6/23.
 */
define(function(require,exports,module){
    //box4
    //切换图片的效果
    $(".imgUl li img").click(function(){
        $(".bigImg")[0].src = this.src
    })
    //放大镜效果
    $(".shadowBox").mouseenter(function(){
        $(".mask").show()
    }).mouseleave(function(){
        $(".mask").hide()
    })
    //mask拖动的效果
    var gapX
    var gapY
    var endX
    var endY
    $(".mask").mousedown(function(e){
        gapX = e.pageX - this.offsetLeft
        gapY = e.pageY - this.offsetTop
        var _this = this
        document.onmousemove = function(ev){//？？？？？？？？？？？？？？？？？
            $(_this).css({
                left:ev.pageX - gapX + "px",
                top:ev.pageY - gapY + "px"
            })
            //限制mask拖不出图片的范围
            if(ev.pageX - gapX < 0){
                endX = 0
            }else if(ev.pageX - gapX > $(".bigImg").width() - 100) {
                endX = $(".bigImg").width() - 100
            }else{
                endX = ev.pageX - gapX
            }

            if(ev.pageY - gapY < 0){
                endY = 0
            }else if(ev.pageY - gapY > $(".bigImg").height() - 100) {
                endY = $(".bigImg").height() - 100
            }else{
                endY = ev.pageY - gapY
            }

            _this.style.left = endX + "px"
            _this.style.top = endY + "px"

            //放大镜区域的背景设置
            $(".magnify").css({
                backgroundImage:"url("+ $(".bigImg")[0].src +")",
                backgroundPositionX:-endX * 3 + "px",
                backgroundPositionY:-endY * 3 + "px",
                marginLeft:"100px"
            })
        }
    })
    $(document).mouseup(function () {
        document.onmousemove = null
    })
})

